<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false"
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="address">
			<view class="dz_list" v-for="(item,index) in adressList" :key="index">
				<view class="ul_left">
					<view class="name">
						<view class="name_nn">
							{{item.name}}
						</view>
						<view class="number">
							{{item.phone}}
						</view>
						<view class="default">
							<text v-if="item.isDefault == 1">默认</text>
							<text v-if="item.isDefault == 0">非默认</text>
						</view>
					</view>
					<view class="dz_xx">
						{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.userAddress}}
					</view>
				</view>
				<view class="ul_right" @click="adressClick(item)">
					<image src="../../static/img/bonus/edit.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="retrieve_submit">
			<button @click="addClick">+新建地址</button>
		</view>
	</view>
	
</template>

<script>
	import {addressList} from '@/api/bonus.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "收货地址管理",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left",
				},
				titleStyle: {
					fontWeight: 700
				},
				adressList:[],
			}
		},
		onLoad() {
			addressList().then(response=>{
				this.adressList = response.data;
				console.log(this.adressList)
			});
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/index/user' // 替换成上一页的路径
				});
			},
			adressClick(item){
				uni.redirectTo({
					url: `/pages/bonus/address_edit?id=${item.addressId}`
				});
			},
			addClick(){
				uni.navigateTo({
					url: '/pages/bonus/address_add'
				});
			}
		}
	}
</script>

<style>
	.address{
	    overflow: auto;
	    border-bottom: #f3f4f5 solid 1px;
	}
	.dz_list{
	    display: flex;
	    color: #333;
	    font-size: 14px;
	    align-items: center;
	    padding: 16px 10px;
	    background-color: #fff;
	    border-top: #f3f4f5 solid 1px;
	}
	.ul_left{
	    display: flex;
	    flex-direction: column;
	    width: 346px;
	}
	.ul_right {
	    margin-left: auto;
	    width: 53px;
	    text-align: right;
	}
	.ul_right image{
	    width: 21px;
	    height: 21px;
	}
	.ul_left .name{
	    display: flex;
	}
	.ul_left .name .name_nn{
	    font-weight: 700;
	}
	.ul_left .number {
	    margin: 0 10px 0 32px;
	}
	.ul_left .default {
	    font-size: 12px;
	    background: linear-gradient(170deg, #f2180c, #fe526f);
	    color: #fff;
	    padding: 1px 2px;
	    border-radius: 4px;
	    -webkit-transform: scale(.8);
	    transform: scale(.8);
	}
	.ul_left .dz_xx {
	    font-size: 12px;
	    margin-top: 5px;
	    line-height: 19px;
	}
	.ul_right {
	    margin-left: auto;
	    width: 53px;
	    text-align: right;
	}
	.retrieve_submit{
	    margin: auto 32px 16px 32px;
	    display: block;
	    width: 80%;
	    margin: 266px auto 0 auto;
	}
	
	.retrieve_submit button{
	    color: #fff;
	    font-size: 14px;
	    padding: 5px 0;
		border-radius: 26px;
		background: linear-gradient(135deg, #d66c6b, #ed6266);
	}
</style>